<template>
  <div class="news" v-show="isShow">
    <div class="news-item-box">
      <p class="news-title">
        <span>{{newsInfo.title}}</span>
      </p>
      <p class="news-control clearfix">
        <span class="news-ly fl">{{newsInfo.copyfrom}}</span>
        <span class="news-ydl fl">
          <van-icon color="rgba(136,137,141,1)" class="icon-ydl" name="eye-o" />
          {{newsInfo.hits}}
        </span>
        <span class="news-time fr">{{newsInfo.addtime}}</span>
      </p>
    </div>
    <div class="news-content" v-if="isLogin" v-html="newsInfo.content"></div>
     <p class="member" v-if="notMember" >
      尊敬的用户，您的会员可能已过期或者未开通该频道的权限，请拨打服务热线
      <a :href="'tel:'+phoneNum">{{phoneNum}}</a>
      寻求帮助
    </p>
    <login-from v-if="!isLogin"></login-from>
    <div class="news-content" v-html="sharecontent"></div>
  </div>
</template>
<script type="text/ecmascript-6">
import { getnewsDetail, getaboutshare } from "../../api/sort";
import loginFrom from "../../components/login/shareLogin";
export default {
  components: {
    loginFrom
  },
  data() {
    return {
       phoneNum: this.$store.state.nocaches.kefuphone,
      isShow: false, //是否展示dom页面
      newsInfo: {},
      isLogin: false,
      sharecontent: "",
      notMember: false,
      params: {
        umobile: "",
        upasswd: ""
      }
    };
  },
  methods: {
    getNews() {
      getnewsDetail(this.$route.query).then(res => {
        this.isShow = true;
        if (res.code == "0007") {
          this.newsInfo = res.data;
        } else if (res.code == "0000") {
          this.isLogin = true;
          this.newsInfo = res.data;
        } else if (res.code == "0008") {
          this.newsInfo = res.data || {};
        } else if (res.code == "1102") {
          this.newsInfo = res.data;
          this.isLogin = true;

          this.notMember = true; //是否是该频道会员
        } else {
          this.newsInfo = res.data || {};
          this.$toast(res.msg);
        }
      });
      getaboutshare(this.$route.query).then(res => {
        if (res.code == "0000") {
          this.sharecontent = res.data;
        }
      });
    }
  },
  created() {
    this.getNews();
  }
};
</script>
<style scoped lang="less">
.news {
  background: #ffffff;
  padding: 0.3rem;
}
.news-item-box {
  border-bottom: 0.01rem dashed rgba(216, 216, 216, 1);
  padding-bottom: 0.3rem;
  color: rgba(21, 23, 35, 1);
  .icon-ding {
    width: 0.3rem;
    height: 0.3rem;
    display: none;
  }
}
.news-title {
  font-size: 0.36rem;
  line-height: 0.54rem;
  max-height: 1.1rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(21, 23, 35, 1);
}
.news-control {
  color: rgba(136, 137, 141, 1);
  font-size: 0.22rem;
  .news-ly {
    padding-right: 0.12rem;
    border-right: 0.01rem solid rgba(136, 137, 141, 1);
  }
  .news-ydl {
    padding-left: 0.12rem;
    font-size: 0.14rem;
  }
  .icon-ydl {
    margin-right: 0.05rem;
  }
}
.news-content {
  padding: 0.3rem 0;
  font-size: 0.3rem;
  color: rgba(110, 111, 117, 1);
  line-height: 0.54rem;   overflow-x: auto;
  
}
table {
  border-color: #efefef !important;
}
.member {
  line-height: 1.5;
  padding: 0.3rem 0;
  font-size: 0.3rem;
  a {
    color: #e49829;
  }
}
</style>
